<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=5.0" charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<!--<link type="text/css" rel="stylesheet" href="../css/model/bootstrap.css" />-->
		<link type="text/css" rel="stylesheet" href="../css/model/swiper.min.css" />
		<link type="text/css" rel="stylesheet" href="../css/style2.css" />
		<link type="text/css" rel="stylesheet" href="../css/wyjs.css" />
		
		<script type="text/javascript" src='../js/model/jquery-2.1.4.min.js'></script>
		<script type="text/javascript" src="../js/model/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js"></script>
		<script type="text/javascript" src="../js/model/reset_font.js"></script>
		
		<title>优当借书</title>
		<script>
			window.onload=function(){
				$("body").css("opacity",1);
			}
		</script>
	</head>
	<body style="opacity: 0;">
		<div class="top">
			<a href="../index.html" class="goback">
				<img src="../images/icons/goback2.png" />
			</a>
			<span>优当借书</span>
			<img src="../images/icons/menu1.png"  class="menu" />
			
		</div>
		<div class="main" >
			<section class="read_online_contain_swiper" >
				<div class="swiper-container top_swiper">
			        <div class="swiper-wrapper">
			            <a href="#" class="swiper-slide">
			            	<img src="../images/wyjs/1.png">
			            </a>
			            <a href="#" class="swiper-slide">
			            	<img src="../images/wyjs/2.png">
			            </a>
			            <a href="#" class="swiper-slide">
			            	<img src="../images/wyjs/3.png">
			            </a>
			            <a href="#" class="swiper-slide">
			            	<img src="../images/wyjs/4.png">
			            </a>
			        </div>
			        <div class="swiper-pagination swiper-pagination-white"></div>
			    </div>
		    <a href="#" class="read_online_search m_flex_box flex_vc flex_hc">
				<!--<i class="iconfont icon-sousuo"></i>-->
				<img src="../images/wyjs/searchPic.png" class="searchPic" />
				<span>书名、作者、关键词</span>
			</a>
		</section>
		
		<div class="navs">
			<div class="swiper-container swiper2">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="../images/wyjs/navPic.png" class="navPic" />
						<div class="cover">
							<div class="cover_top">幼儿馆</div>
							<div class="cover_bot">启蒙</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="../images/wyjs/navPic.png"  class="navPic"/>
						<div class="cover">
							<div class="cover_top">小学馆</div>
							<div class="cover_bot">启蒙</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="../images/wyjs/navPic.png"  class="navPic"/>
						<div class="cover">
							<div class="cover_top">中学馆</div>
							<div class="cover_bot">启蒙</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="../images/wyjs/navPic.png"  class="navPic"/>
						<div class="cover">
							<div class="cover_top">高中馆</div>
							<div class="cover_bot">启蒙</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="../images/wyjs/navPic.png"  class="navPic"/>
						<div class="cover">
							<div class="cover_top">幼儿馆</div>
							<div class="cover_bot">启蒙</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="../images/wyjs/navPic.png"  class="navPic"/>
						<div class="cover">
							<div class="cover_top">中学馆</div>
							<div class="cover_bot">启蒙</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="../images/wyjs/navPic.png"  class="navPic"/>
						<div class="cover">
							<div class="cover_top">高中馆</div>
							<div class="cover_bot">启蒙</div>
						</div>
					</div>
					<div class="swiper-slide">
						<img src="../images/wyjs/navPic.png"  class="navPic"/>
						<div class="cover">
							<div class="cover_top">幼儿馆</div>
							<div class="cover_bot">启蒙</div>
						</div>
					</div>
					<div class="swiper-slide" style="width:0.3rem"></div>
					
				</div>
			</div>
		</div>
		<!--按年龄分类 开始-->
		<div class="list_title">
			<img src="../images/wyjs/ages.png" class="list_title_pic" />
			<span>年龄分类</span>
			<div class="more">
				更多
				<img src="../images/wyjs/morePic.png" class="morePic" />
			</div>
		</div>
		<div class="list_ages">
			<div class="swiper-container swiper3">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href="#">
							<img src="../images/wyjs/book1.png"	 class="bookPic"/>
							<div class="range">0~3岁</div>
						</a> 
					</div>
					<div class="swiper-slide">
						<a href="#">
							<img src="../images/wyjs/book1.png"	 class="bookPic"/>
							<div class="range">4~6岁</div>
						</a> 
					</div>
					<div class="swiper-slide">
						<a href="#">
							<img src="../images/wyjs/book1.png"	 class="bookPic"/>
							<div class="range">7~9岁</div>
						</a> 
					</div>
					<div class="swiper-slide">
						<a href="#">
							<img src="../images/wyjs/book1.png"	 class="bookPic"/>
							<div class="range">9~12岁</div>
						</a> 
					</div>
				</div>
				
				<div class="swiper-pagination" id="pagination-bottom"></div>
			</div>
		</div>
		<!--按年龄分类 借书-->
		<!--图书上新  开始-->
		<div class="list_title">
			<img src="../images/wyjs/news.png" class="list_title_pic" />
			<span>图书上新</span>
			<div class="more">
				更多
				<img src="../images/wyjs/morePic.png" class="morePic" />
			</div>
		</div>
		<div class="list_news">
			<ul>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州</div>
					</a>
				</li>
				<div class="clear"></div>
			</ul>
		</div>
		<!--图书上新  结束-->
		<!--热门阅读  开始-->
		<div class="list_title">
			<img src="../images/wyjs/hot.png" class="list_title_pic" />
			<span>热门借阅</span>
			<div class="more">
				更多
				<img src="../images/wyjs/morePic.png" class="morePic" />
			</div>
		</div>
		<div class="list_hot">
			<ul>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<div class="clear"></div>
			</ul>
		</div>
		<!--热门阅读  结束-->
		<!--阅读推荐  开始-->
		<div class="list_title">
			<img src="../images/wyjs/stars.png" class="list_title_pic" />
			<span>阅读推荐</span>
			<div class="more">
				更多
				<img src="../images/wyjs/morePic.png" class="morePic" />
			</div>
		</div>
		<div class="list_tuijian">
			<ul>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影2：雾锁荆州雾锁荆州</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="../images/wyjs/book1.png"  />
						<div class="bookname">三国谍影</div>
					</a>
				</li>
				<div class="clear"></div>
			</ul>
		</div>
		<!--阅读推荐  结束-->
		<div class="grey2">
		<div id="menu">
				<ul>
					<li class="kefu">
						<a href="#">
							<img src="../images/grey/kefu.png" />
							<div>首页</div>
						</a>
					</li>
					<li class="jiameng">
						<a href="#">
							<img src="../images/grey/jiameng.png" />
							<div>我的</div>
						</a>
					</li>
					<li class="tjbd">
						<a href="#" >
							<img src="../images/grey/tuijian.png" />
							<div>客服</div>
						</a>
					</li>
					<li class="hezuo">
						<a href="#">
							<img src="../images/grey/hezuo.png" />
							<div>加盟开店</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<!--我的收藏悬浮图标 开始-->
		<div class="mysave">
			<img src="../images/wyjs/mysavePic.png"  />
		</div>
		<!--我的收藏悬浮图标 结束-->
		<script>
			$(".mysave").on({
				"touchstart":function(){
					$(this).css("opacity","0.7");
				},
				"touchend":function(){
					$(this).css("opacity","1");
				}
			})
		</script>
		<script type="text/javascript">
		var swiper_top = new Swiper('.top_swiper', {
		        pagination: '.swiper-pagination',
		        effect: 'coverflow',
		        centeredSlides: true,
		        grabCursor: true,
		        slidesPerView: 'auto',
//		        slidesPerView:1.3,
//		        spaceBetween : 0,
//		        slidesOffsetBefore : 40,
		        coverflow: {
		            rotate: 33,
		            stretch: 0,
		            depth: 90,
		            modifier: 1.3,
		            slideShadows : false,
		        },
		        loop:true,

    	});
    	
    	var swiper2=new Swiper(".swiper2",{
    		slidesPerView:'auto',
    		freeMode: true,
	  		spaceBetween:10,
	  		freeModeMomentumVelocityRatio:5
    		
    	})
    	
    	var swiper3=new Swiper(".swiper3",{
    		slidesPerView:3,
    		slidesPerGroup:3,
    		pagination : '#pagination-bottom',
    	})
    	
	  $(function(){
	  	init();
	  	
	  	$(".cover").on({
	  		'touchstart':function(){
	  			$(this).css("background","rgba(0,0,0,0.75)")
	  		},
	  		'touchend':function(){
	  			$(this).css("background","rgba(0,0,0,0.5)")
	  		}
	  	})
	  	$(".swiper3 .swiper-slide a").on({
	  		'touchstart':function(){
	  			$(this).css("opacity","0.5");
	  		},
	  		'touchend':function(){
	  			$(this).css("opacity","1")
	  		}
	  	})
	  	
	  	$(".list_news ul li ").on({
	  		'touchstart':function(){
	  			$(this).css("opacity","0.5");
	  		},
	  		'touchend':function(){
	  			$(this).css("opacity","1");
	  		}
	  	})
	  	
	  	$(".list_hot ul li a").on({
	  		'touchstart':function(){
	  			$(this).css("background","#F5F5F5")
	  		},
	  		'touchend':function(){
	  			$(this).css("background","#FFFFFF")
	  		}
	  	})
	  	
	  	$(".list_tuijian ul li a").on({
	  		'touchstart':function(){
	  			$(this).css("background","#F5F5F5")
	  		},
	  		'touchend':function(){
	  			$(this).css("background","#FFFFFF")
	  		}
	  	})
	  	
	  	
	  	$(".menu").click(function(){
	  		$(".grey2").show();
	  	})
	  	
	  	$(".grey2").click(function(){
	  		$(".grey2").hide();
	  	})
	  	$("#menu ul li ").on({
	  		'touchstart':function(){
	  			$(this).css("background","#F5F5F5")
	  		},
	  		'touchend':function(){
	  			$(this).css("background","#FFFFFF")
	  		}
	  	})
	  	
	  	$(".mysave").on({
	  		"touchstart":function(){
	  			$(this).css("opacity","0.5")
	  		},"touchend":function(){
	  			$(this).css("opacity","1")
	  		}
	  	})
	  })
	  
	  function init(){
	  	$(".grey2").hide();
	  }
	</script>
		
		</div>
	</body>
</html>
